<template>
  <div class="role">
    <div class="searchDiv">
      角色名称：
      <Input v-model="searchName" suffix="ios-search" placeholder="Enter text" style="width:200px;margin-right:15px;" />
      <Button type="primary" @click="pageNo=1;getDataList()" class="chaxun">查询</Button>
      <Button type="success" @click="add">新增角色</Button>
    </div>
    <Table border :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page show-total :total="total" :current="pageNo" :page-size="pageSize" style="margin:20px auto;text-align:center" @on-change="changePage" show-elevator />

    <!-- 新增、编辑角色弹窗开始 -->
    <Modal :mask-closable="false" v-model="modal1" :title="title1">
      <Form :model="formItem" :label-width="80">
        <FormItem label="角色名称">
          <Input v-model="formItem.name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="角色状态">
          <i-switch v-model="formItem.state" size="large">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
        <FormItem label="备注">
          <Input
            v-model="formItem.remark"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="请输入备注"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
               <Button @click="modal1=false">取消</Button>
              <Button type="primary" :loading="btnClick" @click="ok">确定</Button>
          </div>
    </Modal>
    <!-- 新增、编辑角色弹窗结束 -->
    <!-- 权限设置弹窗开始 -->
    <Modal :mask-closable="false" v-model="modal2" title="设置权限" @on-ok="assignResource" class="qxDiv">
       <Form :model="formItem2" :label-width="80">
           <FormItem v-for="item in resourceList" :key="item.id" :label="item.name">
            <CheckboxGroup v-model="item.choose">
                <Checkbox v-for="it in item.child" :key="it.id" :label="it.id">{{it.name}}</Checkbox>
            </CheckboxGroup>
          </FormItem>

       </Form>
    </Modal>
    <Modal :mask-closable="false" v-model="modal3" width="360" class-name="vertical-center-modal" @on-ok="remove(delID)">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>确认删除</span>
        </p>
        <div style="text-align:center">
            <p>确认删除此数据么？</p>
        </div>
    </Modal>
    <!-- 权限设置弹窗结束 -->
  </div>
</template>

<script>

import {
  getTableData,
  add,
  update,
  del,
  assign_resource,
  resource_tree
} from '@/api/role'

import { getTree as resourceGetTree } from '@/api/resource'

export default {
  data () {
    return {
      btnClick:false,
      loading:true,
      delID: 0,
      modal3: false,
      searchName: '',

      pageNo: 1,
      pageSize: 10,
      total: 0,

      modal1: false,
      modal2: false,
      title1: '新增角色',
      isAdd: true,
      msg1: '新增成功',

      assignRoleId: 0,

      formItem: {
        id: 0,
        name: '',
        state: true,
        remark: ''
      },
      formItem2: {
        qx1: ['a1', 'a2'],
        qx2: ['b1'],
        qx3: ['c1', 'c2', 'c3'],
        qx4: ['d1', 'd2'],
        qx5: ['e1', 'e2'],
        qx6: ['f1', 'f2'],
        qx7: ['g1', 'g2', 'g3'],
        qx8: ['h1'],
        qx9: ['i1', 'i2', 'i3', 'i4']
      },

      resourceList: [],
      columns: [
        {
          type: 'index',
          width: 60,
          title: '序号',
          align: 'center'
        },
        {
          title: '角色名称',
          key: 'name'
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            if(params.row.state == true){
              return h('strong', { style: { color: '#19be6b' } },'启用')
            }else {
              return h('strong', { style: { color: '#cc0000' } },'禁用')
            }
            // return h('div', [
            //   h('strong', params.row.state == true ? '启用' : '禁用')
            // ])
          }
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '创建时间',
          key: 'creatTime'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.setQx(params.row.id)
                    }
                  }
                },
                '设置权限'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.openDel(params.row.id)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: []
    }
  },
  methods: {
    openDel (id) {
      this.modal3 = true
      this.delID = id
    },
    assignResource () {


      let resourceIds = []
      this.resourceList.map(item => {
        resourceIds = resourceIds.concat(item.choose)
      })

      let param = {
        id: this.assignRoleId,
        resourceIds: resourceIds
      }
      console.log('param>' + JSON.stringify(param))

      assign_resource(param).then(res => {
        if (res.code == 0) {
          this.$Message.info('权限设置成功')
          this.getDataList();
        } else {
          this.$Message.info(res.message)
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    setQx (id) {
      this.assignRoleId = id
      resource_tree({ id: id }).then(res => {
        console.log(res.data)
        if (res.code == 0) {
          this.modal2 = true
          this.resourceList = res.data.map(item => {
            let obj = {}
            obj.id = item.id
            obj.name = item.displayName
            obj.choose = []

            obj.child = item.children.map(it => {
              let innerObj = {}
              innerObj.id = it.id
              innerObj.name = it.displayName
              if (it.assigned) {
                obj.choose.push(it.id)
              }
              return innerObj
            })
            return obj
          })
          console.log('this.resourceList>' + JSON.stringify(this.resourceList))


        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    remove (id) {
      del({ id: id }).then(res => {
        if (res.code == 0) {
          this.$Message.info('删除成功')
          this.pageNo=1
          this.getDataList()
        } else {
          this.$Message.info(res.message)
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    add () {
      this.formItem = {
        id: 0,
        name: '',
        state: true,
        remark: ''
      }
      this.title1 = '新增角色'
      this.msg1 = '新增成功'
      this.isAdd = true
      this.modal1 = true
    },
    edit (params) {
      this.title1 = '编辑角色'
      this.msg1 = '修改成功'
      this.formItem = params.row
      this.isAdd = false
      this.modal1 = true
    },
    ok () {
      this.btnClick=true;
      let params = {
        id: this.formItem.id,
        name: this.formItem.name,
        status: this.formItem.state ? 1 : 2,
        mark: this.formItem.remark
      }
      console.log('param>' + JSON.stringify(params))

      if (this.isAdd) {
        add(params).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info('新增成功')
            this.getDataList()
            this.modal1=false;
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      } else {
        update(params).then(res => {
          console.log('res>' + JSON.stringify(res))
          if (res.code == 0) {
            this.$Message.info('修改成功')
            this.getDataList()
            this.modal1=false;
            this.btnClick=false;
          } else {
            this.$Message.info(res.message)
            this.btnClick=false;
          }
        }).catch(err => {
          console.error('err>' + JSON.stringify(err))
        })
      }
    },
    /** 分页 */
    changePage (pageNo) {
      this.pageNo = pageNo
      this.getDataList()
    },
    getDataList () {
      let params = {
        name: this.searchName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getTableData(params).then(res => {
        if (res.code == 0) {
          this.total = res.data.total
          let list = res.data.list
          this.tableData = list.map(item => {
            let it = {}
            it.id = item.id
            it.name = item.name

            it.state = (item.status == 1)
            it.remark = item.mark
            it.creatTime = item.createTime
            return it
          })
          this.loading=false
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    }
  },
  mounted () {},
  created () {
    this.getDataList()

    resourceGetTree({}).then(res => {
      console.log(res.data)
      if (res.code == 0) {
        this.resourceList = res.data.map(item => {
          let obj = {}
          obj.id = item.id
          obj.name = item.displayName
          obj.choose = []

          obj.child = item.children.map(it => {
            let innerObj = {}
            innerObj.id = it.id
            innerObj.name = it.displayName

            obj.choose.push(it.id)

            return innerObj
          })
          return obj
        })
        console.log('this.resourceList>' + JSON.stringify(this.resourceList))
      }
    }).catch(err => {
      console.error('err>' + JSON.stringify(err))
    })
  }
}
</script>

<style lang="less">
.role {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
    margin-bottom: 10px;
    .chaxun {
      margin-right: 15px;
    }
  }
}
.qxDiv {
  .ivu-form-item {
    margin-bottom:5px;
  }
}

</style>
